<template>
  <div class="ind-model-list-index">
    <div class="header sub-margin">
      <div class="sub-page-title">考核帮助</div>
      <div v-if="!isEmpty" class="conditions">
        <div class="operate-btns">
          <div class="guide-step list-btn" id="guide-step-2">
            <el-button type="primary" size="small" icon="el-icon-plus" class="guide-step-btn" @click="showCreateDialog">
              {{ newBtnTitle }}
            </el-button>
          </div>
        </div>
      </div>
    </div>
    <div class="main" v-if="loaded">
      <empty v-if="isEmpty" :ind-type="indType" @create="showCreateDialog"></empty>
      <div v-else class="table-view sub-margin">
        <vxe-table :data="indList" stripe border align="center" height="100%" auto-resize>
          <vxe-column type="seq" title="序号" width="60"></vxe-column>
          <vxe-column field="modelName" title="考核模型"></vxe-column>
          <vxe-column field="indexCount" title="指标数量"></vxe-column>
          <vxe-column field="indexScore" title="总分"></vxe-column>
          <vxe-column field="userName" title="创建人"></vxe-column>
          <vxe-column title="操作" :width="180" fixed="right" #default="{ row }">
            <el-button type="text" icon="el-icon-edit" @click="onEdit(row)"></el-button>
            <el-button type="text" icon="el-icon-delete" @click="onDelete(row)"></el-button>
          </vxe-column>
        </vxe-table>
      </div>
      <pagination
        v-if="!isEmpty"
        class="footer sub-margin"
        :current-page.sync="pageIdx"
        :page-size.sync="pageSize"
        :total="totalSize"
        @currentChange="onCurrentChange" />
    </div>
  </div>
</template>

<script>
import { listModel, delModel } from '@apis/indModel.js'
import { IND_TYPE } from '@utility/dict'
import Empty from './components/Empty.vue'
import pagination from '@com/pagination.vue'
export default {
  name: 'IndModelListIndex',
  components: { Empty, pagination },
  props: {},
  data() {
    return {
      indType: IND_TYPE.lznl,
      createIndDialogVisible: false,
      conditions: {
        modelName: '',
        status: '',
      },
      indList: [],
      pageIdx: 1,
      pageSize: 10,
      totalSize: 0,
      loaded: true,
    }
  },
  computed: {
    isLznl() {
      return this.indType === IND_TYPE.lznl
    },
    pageTitle() {
      if (this.isLznl) {
        return '履职能力指标模型管理'
      } else {
        return '履职效果指标模型管理'
      }
    },
    newBtnTitle() {
      if (this.isLznl) {
        return '新建履职能力模型'
      } else {
        return '新建履职效果模型'
      }
    },
    isEmpty() {
      return true
      // return this.totalSize === 0 && this.conditions.modelName === '' && this.conditions.status === ''
    },
  },
  watch: {
    $route() {
      // this.initIndType()
    },
  },
  created() {
    // this.initIndType()
  },
  mounted() {},
  methods: {
    initIndType() {
      // 使用固定值
      const { name } = this.$route
      if (name === 'JXGL_OTHER_HELP_MANAGE') {
        this.indType = IND_TYPE.lzxg
      } else {
        this.indType = IND_TYPE.lznl
      }
      this.listIndModels()
    },
    showCreateDialog() {
      this.createIndDialogVisible = true
    },
    listIndModels() {
      this.indList = []
      this.loaded = false
      listModel({ ...this.conditions, type: this.indType }, this.pageIdx, this.pageSize)
        .then(res => {
          this.loaded = true
          if (res.code === 0) {
            const resData = res.data
            this.indList = resData?.content || []
            this.totalSize = resData?.totalSize || 0
          }
        })
        .catch(() => {
          this.loaded = true
        })
    },
    onCurrentChange() {
      this.listIndModels()
    },
    resetConditions() {
      this.conditions = {
        keyword: '',
        contentType: '',
        state: '',
        isRotation: '',
      }
    },
    onEdit(row) {},
    onDelete(row) {
      this.$confirm(`确定要删除模型：${row.modelName}?`, '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
      })
        .then(() => {
          delModel(row.id).then(res => {
            if (res.code === 0) {
              const resData = res.data
              console.log('resData...', resData)
              this.$message.success('删除成功！')
              this.listIndModels()
            }
          })
        })
        .catch(() => {})
    },
  },
}
</script>
<style lang="scss" scoped>
@import '@styles/layout.scss';

.ind-model-list-index {
  height: 100%;
  display: flex;
  flex-direction: column;
  padding-bottom: 15px;

  .header {
    .conditions {
      display: flex;
      align-items: center;
      padding: 15px 0;

      .label {
        font-size: 14px;
        margin-right: 4px;
      }

      .c-item {
        display: flex;
        vertical-align: middle;
        margin-right: 16px;
        overflow: hidden;

        &.input {
          width: 220px;
        }

        &.status {
          width: 180px;
        }
      }

      .operate-btns {
        flex: 1;
        text-align: right;
        display: flex;
        align-items: center;
        justify-content: flex-end;
        .guide-step {
          position: relative;
        }
        .show-list-type {
          margin-left: 16px;
          width: 80px;
          height: 32px;
          background: #fff;
          border-radius: 2px;
          border: 1px solid #eaeaea;
          display: flex;
          align-items: center;
          justify-content: center;

          i {
            font-size: 16px;
            cursor: pointer;
            color: #333;
            padding: 3px;
          }

          i.active {
            color: #2b78f1;
          }
        }
      }
    }
  }

  .main {
    flex: 1;
    overflow: hidden;
    // text-align: center;
    display: flex;
    flex-direction: column;

    .table-view {
      flex: 1;
      overflow: hidden;
      ::v-deep .el-button {
        .el-icon-delete {
          color: #f56c6c;
        }
      }
    }

    .footer {
      padding: 0 4px;
      margin-top: 15px;
    }
  }
}
</style>
